<template>
  <van-field v-model="result" is-link readonly v-bind="inputProps" @click="showPicker = true"></van-field>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
  </van-popup>
</template>
<script setup>
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: { type: String, default: '' },
  options: { type: Array, default: () => [] },
  inputProps: Object,
})

const result = ref('')
const showPicker = ref(false)

const columns = computed(() => {
  return props.options.map(item => {
    return item.label
  })
})

onMounted(() => getLabel(props.modelValue))

watch(() => props.modelValue, getLabel)

const onConfirm = (value, index) => {
  emit('update:modelValue', props.options[index].value)
  showPicker.value = false
}

function getLabel(newValue) {
  let newResult = ''
  props.options.map(item => {
    if (item.value == newValue) newResult = item.label
  })

  result.value = newResult
}
</script>
<style lang="scss"></style>
